<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Backbone Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore-1.1.6.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="backbone-localstorage.js"></script>
<script type="text/javascript" src="app.js"></script>
<style>
	html,body{
		height: 100%;
		width : 100%;
		margin: 0;
		padding: 0;
		font-size: 12px;
	}
	input.username{
		width : 80px;
	}
	input.age{
		width : 30px;
	}
	select.sex{
		width : 45px;
	}
	.emp-table{
		width: 100%;
		text-align: center;
	}
	.emp-table tr{
		height: 30px;
	}
	.emp-table td .edit{
		display: none;
	}
	.emp-table td.editing .edit{
		display: block;
	}
	.emp-table td.editing .display{
		display: none;
	}
</style>
</head>
<body>
	<div style="width: 650px;margin: 0 auto;" id="app">
		<p id="emp-form">
			<label for="username">姓名：</label>
			<input id="username" class="username" name="username"/>
			<label for="sex">性别：</label>
			<select id="sex" name="sex" class="sex">
				<option value="0">男</option>
				<option value="1">女</option>
			</select>
			<label for="age">年龄：</label>
			<input id="age" name="age" class="age"/>
			<label for="position">职位：</label>
			<input id="position" name="position" class="position" />
			<button id="add-btn">增加</button>
		</p>
		<table class="emp-table" border="1" cellspacing="0" cellpadding="0">
			<caption style="font-size: 14px;font-weight: bold;">职员信息表（双击编辑）</caption>
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>职位</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<div id="pager"></div>
	    <script type="text/template" id="item-template">
 					<td><%= eid %></td>
					<td class="username"><div class="display"><%= username %></div><div class="edit"><input class="username" name="username"></input></div></td>
					<td class="sex"><div class="display"><%= sex=="1" ? "女":"男" %></div><div class="edit"><select name="sex" class="sex" style="width:45px"><option value="0">男</option><option value="1">女</option></select></div></td>
					<td class="age"><div class="display"><%= age %></div><div class="edit"><input class="age" name="age"></input></div></td>
					<td class="position"><div class="display"><%= position %></div><div class="edit"><input class="position" name="position"></input></div></td>
					<td><a href="#" class="del">删除</a></td>
    	</script>
	</div>
</body>
</html>